---
title: 升级您的 dApp 以适配 RainbowKit v2
description: RainbowKit 和 Wagmi 已经升级到 v2
image: guide-rainbowkit-v2.png
---

# 迁移到 RainbowKit 和 Wagmi v2

[wagmi](https://wagmi.sh) 和 [viem](https://viem.sh) 的对等依赖已达 `2.x.x`，并有重大变更。

请按照以下步骤进行迁移。

**1. 将RainbowKit、`wagmi`和`viem`升级至最新版本**

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

**2. 安装`@tanstack/react-query`对等依赖项**

在 Wagmi v2 中，[TanStack Query](https://tanstack.com/query/v5/docs/react/overview) 现在是必需的对等依赖。

用以下命令安装：

```bash
npm i @tanstack/react-query
```

**3. 升级你的RainbowKit和Wagmi配置**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. 检查`wagmi`和`viem`中的重大更改**

如果您在 dApp 中使用 `wagmi` 钩子和 `viem` 操作，则需要遵循 v2 的迁移指南：

- [Wagmi v2 迁移指南](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Viem v2 重大变化](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### RainbowKit 变更

**1. 为EIP-6963钱包提供改进的行为**

支持新的EIP-6963连接标准的钱包（包括Rainbow、MetaMask等）现在将在连接钱包体验中自动显示在“已安装”部分。这确保用户总能找到他们喜欢的钱包，并在没有冲突或备用按钮的情况下连接到dApps。

开发人员继续可以完全控制 "自定义钱包列表"，以突出用户偏爱的钱包。建议继续在列表中包含 `injectedWallet` 和 `walletConnectWallet`，以支持所有平台。

**2. 使用getDefaultConfig的Wagmi配置**

此新API简化了配置体验，并取代了直接使用Wagmi的`createConfig`的需求。链配置被简化，其中包括推断的公共供应商`transports`。

默认钱包列表将自动包含，不再需要使用 `getDefaultWallets` 和 `connectorsForWallets`。

您可以通过将导入或自定义钱包连接器传递给`wallets`来创建自定义钱包列表。不再需要实例化钱包连接器并传递`projectId`和`chains`。

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

您不再需要将 `chains` 传递给 `<RainbowKitProvider>`。

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. 自定义链**

`Chain` 类型根据 Wagmi v2 进行了更改，继续支持 RainbowKit 的 `iconUrl` 和 `iconBackground` 元数据。

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

示例与 `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});
```

示例与 `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. 自定义钱包**

RainbowKit 的钱包连接器已发生重大变更以支持 Wagmi v2。请参考[更新文档](https://www.rainbowkit.com/docs/custom-wallets)和[示例连接器](https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts)来升级您 dApp 中的自定义钱包连接器。

现在钱包连接器也支持带`rdns`道具的EIP-6963标准。确保这被填充以防止在您的钱包列表中对EIP-6963支持钱包的重复引用。

> 请在 GitHub 上报告 RainbowKit v2 的任何问题或反馈[这里](https://github.com/rainbow-me/rainbowkit/issues/new/choose)。
